<template>
  <div class="theme-switch-container">
    <el-switch 
      v-model="isDark"
      active-icon="MoonNight"
      inactive-icon="Sunny"
      active-text="暗色"
      inactive-text="亮色"
      inline-prompt
    />
  </div>
</template>

<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core';
import { onMounted } from 'vue';
import { initTheme } from '@/utils/theme';

// 初始化主题
onMounted(() => {
  initTheme();
});

// 使用VueUse管理主题状态
const isDark = useDark({
  selector: 'html',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: ''
});
const toggleDark = useToggle(isDark);
</script>

<style scoped>
.theme-switch-container {
  padding: 10px;
}
</style>